<template>
  <div class="check-plan-settings-container">
    <h2>盘点计划设置</h2>
    
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>基础设置</span>
        </div>
      </template>
      
      <el-form :model="settings" label-width="150px">
        <el-form-item label="默认盘点周期">
          <el-select v-model="settings.defaultCycle" placeholder="选择默认盘点周期">
            <el-option label="月度" value="monthly" />
            <el-option label="季度" value="quarterly" />
            <el-option label="半年" value="halfYearly" />
            <el-option label="年度" value="yearly" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="盘点负责人">
          <el-select v-model="settings.manager" placeholder="选择盘点负责人" multiple>
            <el-option label="张三" value="张三" />
            <el-option label="李四" value="李四" />
            <el-option label="王五" value="王五" />
            <el-option label="赵六" value="赵六" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="盘点时间范围">
          <el-date-picker
            v-model="settings.checkTimeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        
        <el-form-item label="默认盘点部门">
          <el-select v-model="settings.defaultDepartments" placeholder="选择默认盘点部门" multiple>
            <el-option label="技术部" value="技术部" />
            <el-option label="市场部" value="市场部" />
            <el-option label="行政部" value="行政部" />
            <el-option label="财务部" value="财务部" />
            <el-option label="人力资源部" value="人力资源部" />
            <el-option label="运营部" value="运营部" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="盘点提醒">
          <el-switch v-model="settings.enableReminder" />
          <span v-if="settings.enableReminder" class="switch-label">提前 {{ settings.reminderDays }} 天提醒</span>
          <el-input-number
            v-if="settings.enableReminder"
            v-model="settings.reminderDays"
            :min="1"
            :max="30"
            style="width: 100px; margin-left: 10px;"
          />
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>盘点规则设置</span>
        </div>
      </template>
      
      <el-form :model="settings" label-width="150px">
        <el-form-item label="允许差异率">
          <el-slider
            v-model="settings.allowDiffRate"
            :min="0"
            :max="100"
            :step="0.1"
            :format-tooltip="(value) => `${value}%`"
          />
          <span class="slider-value">{{ settings.allowDiffRate }}%</span>
        </el-form-item>
        
        <el-form-item label="资产状态筛选">
          <el-checkbox-group v-model="settings.assetStatusFilter">
            <el-checkbox label="在用" />
            <el-checkbox label="闲置" />
            <el-checkbox label="维修" />
            <el-checkbox label="借用" />
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item label="资产类型筛选">
          <el-checkbox-group v-model="settings.assetTypeFilter">
            <el-checkbox label="电子设备" />
            <el-checkbox label="办公家具" />
            <el-checkbox label="车辆设备" />
            <el-checkbox label="生产设备" />
            <el-checkbox label="其他" />
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item label="盘点方式">
          <el-radio-group v-model="settings.checkMethod">
            <el-radio label="全面盘点" />
            <el-radio label="抽样盘点" />
            <el-radio label="循环盘点" />
          </el-radio-group>
        </el-form-item>
        
        <el-form-item v-if="settings.checkMethod === '抽样盘点'" label="抽样比例">
          <el-slider
            v-model="settings.sampleRate"
            :min="10"
            :max="100"
            :step="5"
            :format-tooltip="(value) => `${value}%`"
          />
          <span class="slider-value">{{ settings.sampleRate }}%</span>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>报表模板设置</span>
        </div>
      </template>
      
      <el-form :model="settings" label-width="150px">
        <el-form-item label="默认报表格式">
          <el-radio-group v-model="settings.reportFormat">
            <el-radio label="Excel" />
            <el-radio label="PDF" />
            <el-radio label="Word" />
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="报表包含字段">
          <el-checkbox-group v-model="settings.reportFields">
            <el-checkbox label="资产编号" />
            <el-checkbox label="资产名称" />
            <el-checkbox label="资产类型" />
            <el-checkbox label="当前状态" />
            <el-checkbox label="所属部门" />
            <el-checkbox label="使用人" />
            <el-checkbox label="存放位置" />
            <el-checkbox label="资产价值" />
            <el-checkbox label="盘点结果" />
            <el-checkbox label="差异原因" />
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item label="是否自动生成报表">
          <el-switch v-model="settings.autoGenerateReport" />
        </el-form-item>
      </el-form>
    </el-card>
    
    <div class="action-buttons">
      <el-button @click="resetSettings">重置</el-button>
      <el-button type="primary" @click="saveSettings">保存设置</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CheckPlanSettings',
  data() {
    return {
      settings: {
        // 基础设置
        defaultCycle: 'quarterly',
        manager: ['张三', '李四'],
        checkTimeRange: [],
        defaultDepartments: ['技术部', '市场部', '行政部', '财务部'],
        enableReminder: true,
        reminderDays: 7,
        
        // 盘点规则设置
        allowDiffRate: 5,
        assetStatusFilter: ['在用', '闲置', '借用'],
        assetTypeFilter: ['电子设备', '办公家具', '车辆设备', '生产设备'],
        checkMethod: '全面盘点',
        sampleRate: 30,
        
        // 报表模板设置
        reportFormat: 'Excel',
        reportFields: ['资产编号', '资产名称', '资产类型', '当前状态', '所属部门', '使用人', '盘点结果'],
        autoGenerateReport: true
      }
    }
  },
  mounted() {
    this.loadSettings()
  },
  methods: {
    loadSettings() {
      // 这里应该从后端加载设置，现在使用默认值
      console.log('加载设置')
    },
    saveSettings() {
      console.log('保存设置:', this.settings)
      this.$message.success('设置保存成功')
    },
    resetSettings() {
      this.$confirm('确定要重置所有设置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 重置为默认值
        this.settings = {
          defaultCycle: 'quarterly',
          manager: ['张三', '李四'],
          checkTimeRange: [],
          defaultDepartments: ['技术部', '市场部', '行政部', '财务部'],
          enableReminder: true,
          reminderDays: 7,
          allowDiffRate: 5,
          assetStatusFilter: ['在用', '闲置', '借用'],
          assetTypeFilter: ['电子设备', '办公家具', '车辆设备', '生产设备'],
          checkMethod: '全面盘点',
          sampleRate: 30,
          reportFormat: 'Excel',
          reportFields: ['资产编号', '资产名称', '资产类型', '当前状态', '所属部门', '使用人', '盘点结果'],
          autoGenerateReport: true
        }
        this.$message.success('设置已重置')
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.check-plan-settings-container {
  padding: 20px;
}

.settings-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.slider-value {
  margin-left: 10px;
  color: #409EFF;
  font-weight: bold;
}

.switch-label {
  margin-left: 10px;
  color: #606266;
}

.action-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style>